<template>
	<div class="card-confirm-order-carPlate">

		<div class="form-info">
			<div class="item car-info">
				<div class="gray">服务车辆：</div>
				<div class="text-overflow car-name">{{carname}}</div>
				<div v-if='!carplateval' class="carplate-choose">
					<div @click='showPlate'><b>{{carPlate.value}}</b><i class="iconfont icon-arrow-down"></i></div>
					<input type="text" placeholder="请输入车牌" id="carPlate" maxlength="6" @input='saveValue("carplate",$event)' v-model='carPlateuser'/>
				</div>
				<div v-else class="carplate">{{carplateval}}</div>
			</div>
		</div>
		<div class="car-plate fadeInRight-transition" v-if='carPlate.carPlateState'>
			<ul v-show='carPlate.zhiState' class='zhi'>
				<li class="" v-for='item in carPlate.zhi' :class="{'on': $index == 0}" @click='getPlate'>{{item}}</li>

			</ul>
			<ul style="" v-show='carPlate.enState' class="en">
				<li v-for='item in carPlate.en' :class="{'on': $index == 0}" @click='getPlate'>{{item}}</li>
			</ul>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
				return {
					carPlate: {
						value: '沪',
						carPlateState: false, //选择车牌 false 可以选择
						zhi: ["沪", "京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁", "新", "ABC"],
						en: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "汉字"],
						zhiState: true, //车牌中文显示
						enState: false,
						carplateval:''
					},
					carPlateuser:localStorage.getItem('carplate')
				}
			},
			props: {
				carplateval: {
					type: String,
					default: ''
				},
				carname: {
					type: String,
					default: ''
				},
				carplateuser:{
					type:String,
					default:''
				}
			},
			methods: {
				showPlate: function() {
					var self = this;
					self.carPlate.carPlateState = true;
				},
				getPlate: function(event) {
					var el = event.currentTarget,
						self = this,
						elVal = el.innerHTML;
					var parent = el.parentNode;
					var child = parent.querySelectorAll('li');
					//点击ABC切换字母
					if(el.innerHTML == 'ABC') {
						self.carPlate.zhiState = false;
						self.carPlate.enState = true;
						return false;
					}
					//点击汉字切换到汉字
					if(el.innerHTML == '汉字') {
						self.carPlate.zhiState = true;
						self.carPlate.enState = false;
						return false;
					}

					for(var i = 0; i < child.length; i++) {
						child[i].className = '';
					}
					el.className = 'on';
					self.carPlate.value = elVal;
					self.carPlate.carPlateState = false;

				},
				saveValue: function(name,event) {
		                var self = this;
		                var val = event.currentTarget.value;
		                event.currentTarget.value=val.toUpperCase();
		                localStorage.setItem(name, val);
		        },
				goback:function(){
					this.carPlate.carPlateState = false;
				}
				
			},
			ready: function() {

			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body {
		background: #eeeeee!important;
	}
	
	.card-confirm-order-carPlate {
		font-size: rem(14);
		color: #333;
		.form-info {
			padding-left: rem(14);
			background: #fff;
			font-size: rem(14);
			color: #333;
			.item {
				display: flex;
				align-items: center;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
			}
			.car-info {
				.car-name {
					font-size: rem(13);
					color: #999;
					padding-left: rem(10);
					width: rem(127);
				}
				.carplate {
					font-size: rem(13);
					color: #999;
					padding-left: rem(27);
				}
				.carplate-choose {
					height: rem(44);
					display: flex;
					align-items: center;
					margin-left:rem(21);
					div {
						display: block;
						width: rem(42);
						height: rem(24);
						line-height: rem(24);
						background: $blue;
						color: #fff;
						text-align: center;
						border-radius: rem(4);
						b {
							font-weight: normal;
							font-size: rem(14);
						}
						i {
							font-size: rem(9);
							padding-left: rem(3);
						}
					}
					input {
						display: block;
						width: rem(90);
						border: none;
						padding-left: rem(10);
					}
				}
			}
		}
		.car-plate {
			background: #fff;
			width: rem(375);
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2000000;
			ul {
				overflow: hidden;
				padding: rem(10);
				li {
					width: rem(83);
					height: rem(40);
					line-height: rem(40);
					text-align: center;
					border: 1px solid #17a3eb;
					color: #17a3eb;
					margin: 0 rem(7) rem(7) 0;
					font-size: rem(14);
					float: left;
					&:nth-child(4n) {
						margin-right: 0;
					}
					&.on {
						background: #17a3eb;
						color: #fff;
					}
					&:last-child {
						background-position: 0 0;
						background-size: 2.25rem 2.5rem;
						background-repeat: no-repeat;
						background-color: #e5e7ea;
						color: #a4a9ae;
						border-color: #e5e7ea;
						text-indent: 1.25rem;
					}
					&:last-child:before{
						font-family: "iconfont" !important;
						font-size: rem(16);
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-webkit-text-stroke-width: 0.2px;
						-moz-osx-font-smoothing: grayscale;
						content: "\e606";
						padding-right: rem(5);
						
					}
				}
			}
		}
	}
	
	.fadeInRight-transition {
		-webkit-transform: none;
		transform: none;
		-webkit-transition: all .4s ease;
		transition: all .4s ease
	}
	
	.fadeInRight-enter,
	.fadeInRight-leave {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}
	
	@-webkit-keyframes fadeInRight {
		0% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0)
		}
		100% {
			-webkit-transform: none;
			transform: none
		}
	}
	
	@keyframes fadeInRight {
		0% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0)
		}
		100% {
			-webkit-transform: none;
			transform: none
		}
	}
	
	.fadeInRight {
		-webkit-animation-name: fadeInRight;
		animation-name: fadeInRight
	}
</style>